<link rel="stylesheet" href="../css/element.css">
<link rel="stylesheet" href="../css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="../js/vue.min.js"></script>
<script src="../js/element.js"></script>
<script src="../js/common.js"></script>

<style>
  .el-header {
    margin-bottom: 20px;
  }

/* 上传 */
.upload-demo {
  display: flex;
 }
 .el-list-enter-active,
 .el-list-leave-active {
   transition: none;
 }
 .el-list-enter,
 .el-list-leave-active {
   opacity: 0;
 }
 .el-upload-list {
   height: 40px;
 }

</style>

<!-- 模型一 -->
<div id="addNode">
  <el-container>
    <el-header >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >工具</el-breadcrumb-item>
        <el-breadcrumb-item>excle解析</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main v-loading="dataLoading">
      <div style="margin:4% 15%;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
          <el-form-item label="excel文件" >
            <el-col :span="spanData">
                <el-upload class="upload-demo"  action=""  :file-list="fileList" :on-change="fileChange" accept=".xlsx,.xls"  :http-request="getFile">
                    <el-button>选择文件</el-button>
                 </el-upload>
            </el-col>
            
          </el-form-item>
          <el-form-item label="分栏下标:" >
            <el-col :span="spanData">
              <el-input v-model="ruleForm.port" placeholder="从0开始"></el-input>
            </el-col>
            
          </el-form-item>
          <el-form-item label="列号:" >
            <el-col :span="spanData">
              <el-input v-model="ruleForm.username" placeholder="多个逗号分隔"></el-input>
            </el-col>
              
          </el-form-item>
          <el-form-item label="首行:" >
            <el-col :span="spanData">
              <el-radio v-model="radio" label="1">跨过</el-radio>
              <el-radio v-model="radio" label="2">读取</el-radio>
            </el-col>

          </el-form-item>
          <el-form-item label="分隔符:" >
            <el-col :span="spanData">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">生成</el-button>
          </el-form-item>

        </el-form>
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </div>

    </el-main>
  </el-container>
</div>


<script>


  var app7 = new Vue({
  el: '#addNode',
  data() {
      return {
        ruleForm: {
          ip: '',
          username: '',
          pwd: '',
          desc: ''
        },
        spanData:20,
        // 单选框
        radio:'1',
        // 下拉框
        options: [{
          value: ',',
          label: '逗号'
        }, {
          value: '|',
          label: '竖线'
        }, {
          value: ':',
          label: '冒号'
        }, {
          value: ';',
          label: '分号'
        }],
        value: ',',

        rules: {
          ip: [
            { required: true, message: '请输入ip地址', trigger: 'blur' },
            { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
          ],
          port:[
            { required: true, message: '请输入端口', trigger: 'blur' },
            { min: 1, max: 5, message: '长度1 到 5 位数字', trigger: 'blur' }
          ],
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '说明', trigger: 'blur' }
          ]
        },
        dataLoading:false,
        // 上传文件
        fileList: [],
		file:{},
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {

          // 遮罩，一秒后消除
          this.dataLoading=true;
          setTimeout(function(){
            app7.dataLoading=false;
            admin.msgSucess(app7,"提示","消除遮罩")
          },1000)
          if (valid) {
            alert('submit!'+this.resetForm);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //   上传excle
      fileChange (file, fileList) {
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]]
        }

      },
      getFile(item) {
          this.file = item.file
      },
    }
})
  
</script>